<template>
	<!-- @click.stop.prevent="addcart" -->
  <div class="cartcontrol" @click.stop.prevent="">
  	 <transition name="fade">
        <div class="cart-decrease " v-show="food.count>0" @click.stop.prevent="decreasecart"  >
	  	 	<span class="inner icon-remove_circle_outline" ></span>
	    </div>	
	 </transition>
	 <!-- ($event) -->
    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
    <div class="cart-add icon-add_circle" @click.stop.prevent="addcart" ></div>
  </div>
</template>

<!-- https://blog.csdn.net/elie_yang/article/details/80455379  小球解决方安 -->
<script>
import Vue from 'vue'
export default {
  name: 'cartcontrol',
  props:{
  	food:{
  		type:Object
  	}
  },
  created(){
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
			isDisable: false
    }
  },
  methods:{
		addcart(event){ //左侧加减按钮 商品数量多少
	   if (this.isDisable) return false;
     this.isDisable = true
      setTimeout(() => { //防止用户重复点击 https://www.jb51.net/article/139840.htm
				if (!event._constructed) { //因为购物车按钮在bscroll里面,所以需要处理掉bscroll的事件类型
					return;
				}
				if(!this.food.count){
					Vue.set(this.food,'count',1)
				}else{
					this.food.count++;
				}
				this.isDisable = false;
				this.$emit("cart",event.target)//派发一个动画方法
			}, 10)
		}, 
  	decreasecart(event){ //减法运算
		 if (this.isDisable) return false;
		 this.isDisable = true
		 setTimeout(() => {
  		if(!event._constructed){
			  return;
		  }
  		if(this.food.count){
  			this.food.count--
  		}
			this.isDisable = false;
		 }, 10)
  	}
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
		.cartcontrol{
			font-size: 0;
			.cart-decrease{
				display: inline-block;
				padding: 6px;
				transition: all .4s linear;
				&.fade-enter-active,&.fade-leave-active{//小球滚动事件进入
					opacity: 1;
					transform: translate3d(0, 0, 0);
					.inner{
						transform: rotate(0);
					}
				}
				&.fade-enter,&.fade-leave-to{ //小球滚动事件离开
					opacity: 0;
					transform: translate3d(24px, 0, 0); 
					.inner{
						transform: rotate(180deg);
					}
				}
				.inner{
					display: inline-block;
					line-height: 24px;
					font-size: 24px;
					color: rgb(0,160,220);
					transition: all .4s linear;
				}
		  }
			.cart-count{
				display: inline-block;
				vertical-align: top;
				width: 12px;
				padding-top: 6px;
				line-height: 24px;
				text-align: center;
				font-size: 10px;
				color: rgb(147,153,259);
			}
			.cart-add{
				display: inline-block;
				line-height: 24px;
				font-size: 24px;
				padding: 6px ;
				color: rgb(0,160,220);
			}
		}

</style>
